<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
		 使用方法：1.用于表格中单元格垂直居中
		          2.用于行内元素以及行内块元素的垂直居中
				  【文本和图片垂直居中（对齐）效果】
				  对齐分为四种：基线对齐，顶部对齐
				              居中对齐，底部对齐
				元素种类：块元素、行元素、行内块元素
				块元素特点 ：独占一行，设置宽高
				行元素特点：一行内显示、不可设置宽高
				网页：元素之间嵌套生成
				行元素与块元素可以任意嵌套
				前提：设置宽高--行套块
				             --块套块 √
							 --块套行 √
				前提：一行内显示--行套块 √
				               --块套块 × 
							   --块套行 √
							   --行套行 √
				-->
				
		<style>
			img.baseline{
				/*vertical-align: baseline 默认基线对齐*/
				vertical-align: baseline;
			}
			img.middle{
			/*vertical-align: baseline 顶部对齐*/	
			vertical-align: middle;
			}
			img.top{
				vertical-align: top;
			}
			img.bottom{
				vertical-align: bottom;
			}
			/* css选择器--抓第一张照片
			 思路：派生选择器：找后代+伪类选择器：添加效果
			 p img:nth-child(1)
			 */
		</style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字：图片叫什么名字
		                    文字后面加img，设置宽高：25-100px
							每个图片后面加：基线对齐、顶部对齐
							居中对齐，底部对齐
							-->
		<h1>文本与图片垂直属性</h1>
	    <p>卡卡西<img class="baseline" src="img/火影人物 卡卡西_爱给网_aigei_com.png" alt="卡卡西"width="100px"hight="100px">基线对齐</p>
		<p>佐助<img class="top" src="img/火影忍者免抠PNG图片 (163)_爱给网_aigei_com.png" alt="佐助"width="100px"hight="100px">顶部对齐</p>
		<p>鸣人<img class="middle" src="img/火影忍者免抠PNG图片 (38)_爱给网_aigei_com.png" alt="鸣人"width="100px"hight="100px">居中对齐</p>
		<p>鼬<img class="bottom" src="img/火影人物_077_爱给网_aigei_com.png" alt="鼬"width="100px"hight="100px">底部对齐</p>
	</body>
</html>